<!--
 * @Date: 2025-04-02 21:38:15
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-04-24 23:42:15
 * @FilePath: /admin/vue/src/views/admin/system/menu/index.vue
-->
<script setup lang="ts">
import dayjs from 'dayjs'
import type { DataTableColumns } from 'naive-ui'
const { collection, load } = useMenu()

const columns: DataTableColumns<MenuModel> = [
  { title: '菜单名称', key: 'label', width: 180 },
  { title: '菜单图标', key: 'icon', width: 140 },
  { title: '路由名称', key: 'router_name', width: 200 },
  {
    title: '创建时间',
    key: 'created_at',
    render: (rowData: MenuModel) => dayjs(rowData.created_at).format('YYYY-mm-DD HH:mm:ss'),
    width: 180,
  },
  {
    title: '更新时间',
    key: 'updated_at',
    render: (rowData: MenuModel) => dayjs(rowData.updated_at).format('YYYY-mm-DD HH:mm:ss'),
    width: 180,
  },
]

load()
</script>

<template>
  <n-card class="h-full" :bordered="false">
    <n-data-table
      remote
      flex-height
      min-height="calc(100vh - 178px)"
      :columns="columns"
      :data="collection?.data"
      :row-key="(rowData) => rowData.id"
    />
  </n-card>
</template>

<style lang="scss"></style>
